<template>
  <el-dialog title="编辑页面html" v-model="show" width="90%" :append-to-body="true" :close-on-press-escape="false"
             custom-class="tablePageDialog"
             :close-on-click-modal="false">
    <div class="ChildPage TablePage dynamicPage" style="height: 85vh">
      <div class="dynamicPage_left">
        <div class="dynamicPage_left_top top">
          <div class="top_btn">
            <el-button size="small" icon="el-icon-plus" type="warning" v-on:click="addColumn">新增列</el-button>
            <el-button size="small" icon="el-icon-upload2" type="warning"
                       v-on:click="$refs.previewDialog.open({option: option})">页面预览
            </el-button>
            <el-button size="small" icon="el-icon-c-scale-to-original" type="warning"
                       v-on:click="$refs.sourceCodeDialog.open({option: option})">下载源代码
            </el-button>
          </div>
          <div class="top_ok">
            <el-button size="small" icon="el-icon-check" type="primary" v-on:click="saveOption" v-loading="saveLoading">
              保存
            </el-button>
          </div>
        </div>
        <div class="dynamicPage_left_table">
          <el-table border :data="option.column" height="78vh" :highlight-current-row="true"
                    @row-click="clickRow($event)">
            <el-table-column label="" align="center" width="80px">
              <template #default="scope">
                <el-button type="text" style="font-size: 16px;color: #000;" v-if="scope.$index > 0"
                           v-on:click="moveTop(scope.row, scope.$index)" icon="el-icon-top"></el-button>
                <el-button type="text" style="font-size: 16px;color: #000;"
                           v-if="scope.$index < option.column.length - 1"
                           v-on:click="moveBottom(scope.row, scope.$index)" icon="el-icon-bottom"></el-button>
                <el-button type="text" style="font-size: 16px;" v-on:click="addColumn(scope.$index)"
                           icon="el-icon-plus"></el-button>
              </template>
            </el-table-column>
            <el-table-column label="字段名">
              <template #default="scope">
                <el-input size="small" v-model="scope.row.label" placeholder="请输入字段名称"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="字段key">
              <template #default="scope">
                <el-input size="small" v-model="scope.row.prop" placeholder="请输入字段key"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="类型">
              <template #default="scope">
                <el-select size="small" v-model="scope.row.type" @change="changeColumnType(scope.row)">
                  <el-option label="下拉框" value="select"></el-option>
                  <el-option label="文本框" value="text"></el-option>
                  <el-option label="文本域" value="textarea"></el-option>
                  <el-option label="数字输入框" value="number"></el-option>
                  <el-option label="计数器" value="inputNumber"></el-option>
                  <el-option label="单选框" value="radio"></el-option>
                  <el-option label="复选框" value="checkbox"></el-option>
                  <el-option label="开关" value="switch"></el-option>
                  <el-option label="日期" value="date"></el-option>
                  <el-option label="位置" value="location"></el-option>
                  <el-option label="缩略图" value="image"></el-option>
                  <el-option label="标签框" value="labels"></el-option>
                  <el-option label="表单分割线" value="split"></el-option>
                  <el-option label="状态" value="status" v-if="option.status.show"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="默认值">
              <template #default="scope">
                <el-switch v-if="scope.row.type === 'switch'" style="margin-left: 10px"
                           v-model="scope.row.form.default"></el-switch>
                <el-date-picker v-else-if="scope.row.type === 'date'" v-model="scope.row.form.default"
                        class="date-picker" start-placeholder="开始时间" end-placeholder="结束时间"
                        :type="scope.row.form.dateType" :format="scope.row.form.valueFormat"
                        :value-format="scope.row.form.valueFormat" placeholder="选择日期">
                </el-date-picker>
                <el-input size="small" v-model="scope.row.form.default" v-else placeholder="请输入默认值"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="80px">
              <template #default="scope">
                <el-button style="color: red;font-size: 12px" type="text"
                           v-on:click="option.column.splice(scope.$index, 1);editIndex=-1">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="dynamicPage_right">
        <el-tabs v-model="tabKey">
          <el-tab-pane label="接口配置" name="api"></el-tab-pane>
          <el-tab-pane label="页面配置" name="page"></el-tab-pane>
          <el-tab-pane label="表格配置" name="table"></el-tab-pane>
          <el-tab-pane label="列配置" name="column"></el-tab-pane>
        </el-tabs>
        <div class="dynamicPage_right_scroll">
          <el-scrollbar>
            <div class="dynamicPage_right_panel form" v-if="tabKey === 'page'">
              <div class="form_span">
                <div class="form_span_li">
                  <div class="checkbox">
                    <el-checkbox v-model="option.addBtn" size="mini"></el-checkbox>
                  </div>
                  <div class="label">显示新增按钮</div>
                </div>
                <div class="form_span_li">
                  <div class="checkbox">
                    <el-checkbox v-model="option.import.show" size="mini"></el-checkbox>
                  </div>
                  <div class="label">显示导入按钮</div>
                </div>
                <div class="form_span_child " v-if="option.import.show">
                  <div class="form_span_li">
                    <div class="value">
                      <el-input size="mini" placeholder="请输入导入模板链接" v-model="option.import.tempFilePath">
                        <template #prepend>模板链接</template>
                      </el-input>
                    </div>
                  </div>
                </div>
                <div class="form_span_li">
                  <div class="checkbox">
                    <el-checkbox v-model="option.export.show" size="mini"></el-checkbox>
                  </div>
                  <div class="label">显示导出按钮</div>
                </div>
                <div class="form_span_li">
                  <div class="checkbox">
                    <el-checkbox v-model="option.page.show" size="mini"></el-checkbox>
                  </div>
                  <div class="label">显示分页</div>
                </div>
              </div>
              <div class="form_span">
                <div class="form_span_title">
                  <div class="form_span_title_h1">表单配置</div>
                </div>
                <div class="form_span_li">
                  <div class="label">宽度</div>
                  <div class="value">
                    <el-input v-model="option.form.width" type="number" placeholder="表单宽度" size="mini">
                      <template #append>px</template>
                    </el-input>
                  </div>
                </div>
                <div class="form_span_li">
                  <div class="label">标签宽度</div>
                  <div class="value">
                    <el-input v-model="option.form.labelWidth" type="number" placeholder="标签宽度" size="mini">
                      <template #append>px</template>
                    </el-input>
                  </div>
                </div>
                <div class="form_span_li">
                  <div class="label">表单尺寸</div>
                  <div class="value">
                    <el-radio-group v-model="option.form.size" size="small">
                      <el-radio-button label="medium">大</el-radio-button>
                      <el-radio-button label="small">中</el-radio-button>
                      <el-radio-button label="mini">小</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
                <div class="form_span_li">
                  <div class="label">遮罩关闭</div>
                  <div class="value">
                    <el-checkbox v-model="option.form.closeOnClickModel" size="small"></el-checkbox>
                  </div>
                </div>
                <div class="form_span_li">
                  <div class="label">ESC关闭</div>
                  <div class="value">
                    <el-checkbox v-model="option.form.closeOnPressEscape" size="small"></el-checkbox>
                  </div>
                </div>
              </div>
            </div>
            <div class="dynamicPage_right_panel form" v-else-if="tabKey === 'table'">
              <div class="form_span">
                <div class="form_span_title">
                  <div class="form_span_title_h1">表格配置</div>
                </div>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div class="form_span_li">
                      <div class="checkbox">
                        <el-checkbox v-model="option.border" size="mini"></el-checkbox>
                      </div>
                      <div class="label">开启边框</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="form_span_li">
                      <div class="checkbox">
                        <el-checkbox v-model="option.selection" size="mini"></el-checkbox>
                      </div>
                      <div class="label">开启多选</div>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <div class="form_span_li">
                      <div class="checkbox">
                        <el-checkbox v-model="option.index" size="mini"></el-checkbox>
                      </div>
                      <div class="label">开启序号</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="form_span_li">
                      <div class="checkbox">
                        <el-checkbox v-model="option.stripe" size="mini"></el-checkbox>
                      </div>
                      <div class="label">开启斑马线</div>
                    </div>
                  </el-col>
                </el-row>
                <div class="form_span_li">
                  <div class="checkbox">
                    <el-checkbox v-model="option.hiddenHandleMenu" size="mini"></el-checkbox>
                  </div>
                  <div class="label">隐藏操作栏</div>
                </div>
                <div class="form_span_li">
                  <div class="checkbox">
                    <el-checkbox v-model="option.status.show" size="mini"></el-checkbox>
                  </div>
                  <div class="label">开启审核</div>
                </div>
                <div class="form_span_li" v-if="option.status.show">
                  <div class="label">状态集合</div>
                  <div class="value dicData">
                    <div class="dicData_li" v-for="(d, di) in option.status.list" v-bind:key="d.id">
                      <el-input size="mini" style="margin-right: 5px;" placeholder="key" v-model="d.id"></el-input>
                      <el-input size="mini" style="margin-right: 5px;" placeholder="value" v-model="d.label"></el-input>
                      <el-button size="mini" class="deleteBtn" type="danger" circle icon="el-icon-minus"
                                 v-on:click="option.status.list.splice(di, 1)"></el-button>
                    </div>
                    <div class="dicData_li add">
                      <el-button size="mini" type="text"
                                 v-on:click="option.status.list.push({id: null, label: null})">+ 添加
                      </el-button>
                    </div>
                  </div>
                </div>
                <div class="form_span_li" v-if="!option.hiddenHandleMenu">
                  <div class="label">操作图钉</div>
                  <div class="value">
                    <el-radio-group v-model="option.handleColumnFixed" size="small">
                      <el-radio-button label="">无</el-radio-button>
                      <el-radio-button label="left">左</el-radio-button>
                      <el-radio-button label="right">右</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
                <div class="form_span_li" v-if="!option.hiddenHandleMenu">
                  <div class="label">操作列宽度</div>
                  <div class="value">
                    <el-input v-model="option.menuWidth" type="number" placeholder="默认120"
                              size="mini">
                      <template #append>px</template>
                    </el-input>
                  </div>
                </div>
                <div class="form_span_li">
                  <div class="label">表格无数据文本</div>
                  <div class="value">
                    <el-input v-model="option['empty-text']" size="mini"
                              placeholder="无数据文本"></el-input>
                  </div>
                </div>
                <div class="form_span_li">
                  <div class="label">列无数据文本</div>
                  <div class="value">
                    <el-input v-model="option.columnEmptyText" size="mini"
                              placeholder="列无数据文本"></el-input>
                  </div>
                </div>
              </div>
              <div class="form_span" v-if="!option.hiddenHandleMenu">
                <div class="form_span_title">
                  <div class="form_span_title_h1">操作菜单</div>
                  <div class="form_span_title_add"
                       v-on:click="option.handleBtnList.push({key: null, label: null, show: true, color: null})">添加
                  </div>
                </div>
                <draggable class="handleBtnList" v-model="option.handleBtnList">
                  <template #item="{element, index}">
                    <div class="handleBtnList_span">
                      <div class="handleBtnList_span_checkbox"
                           v-if="element.key === 'edit' || element.key === 'delete'">
                        <el-checkbox v-model="element.show"></el-checkbox>
                      </div>
                      <div class="handleBtnList_span_label">
                        <el-input size="mini" v-model="element.label" placeholder="按钮文字"/>
                      </div>
                      <div class="handleBtnList_span_btn set el-icon-setting"></div>
                      <div class="handleBtnList_span_btn delete el-icon-delete"
                           v-if="!(element.key === 'edit' || element.key === 'delete')"
                           v-on:click="option.handleBtnList.splice(index, 1)"></div>
                    </div>
                  </template>
                </draggable>
              </div>
            </div>
            <div class="dynamicPage_right_panel form" style="padding-top: 35px;" v-else-if="tabKey === 'column'">
              <div class="columnName" v-if="editIndex>-1 && option.column[editIndex]">
                当前列：<span>{{ option.column[editIndex].label }}</span>
              </div>
              <template v-if="editIndex>-1 && option.column[editIndex] && option.column[editIndex].type !== 'split'">
                <div class="form_span">
                  <div class="form_span_title">
                    <div class="form_span_title_h1">表格配置</div>
                  </div>
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <div class="form_span_li">
                        <div class="label">开启展示
                          <el-tooltip effect="dark" content="开启后，当前项会在表格中展示。" placement="top">
                            <i class="el-icon-question"></i>
                          </el-tooltip>
                        </div>
                        <div class="value">
                          <el-checkbox v-model="option.column[editIndex].tableShow" size="mini"></el-checkbox>
                        </div>
                      </div>
                    </el-col>
                    <el-col :span="12">
                      <div class="form_span_li">
                        <div class="label">初始检索项
                          <el-tooltip effect="dark" content="开启后，检索时会将当前值默认作为检索条件。" placement="top">
                            <i class="el-icon-question"></i>
                          </el-tooltip>
                        </div>
                        <div class="value">
                          <el-checkbox v-model="option.column[editIndex].defaultSearch" size="mini"></el-checkbox>
                        </div>
                      </div>
                    </el-col>
                  </el-row>
                  <template v-if="option.column[editIndex].tableShow">
                    <el-row :gutter="20">
                      <el-col :span="12">
                        <div class="form_span_li">
                          <div class="label">内容折叠
                            <el-tooltip effect="dark" content="在表格中展示时，当内容过长被隐藏时显示 tooltip。" placement="top">
                              <i class="el-icon-question"></i>
                            </el-tooltip>
                          </div>
                          <div class="value">
                            <el-checkbox v-model="option.column[editIndex].showOverflowTooltip"
                                         size="mini"></el-checkbox>
                          </div>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <div class="form_span_li">
                          <div class="label">是否排序</div>
                          <div class="value">
                            <el-checkbox v-model="option.column[editIndex].sortable" size="mini"></el-checkbox>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                    <div class="form_span_li">
                      <div class="label">宽度</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].width" type="number" placeholder="列在表格中的宽度"
                                  size="mini">
                          <template #append>px</template>
                        </el-input>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">最小宽度</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].minWidth" type="number" placeholder="列在表格中的最小宽度"
                                  size="mini">
                          <template #append>px</template>
                        </el-input>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">样式名</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].className" size="mini"
                                  placeholder="自定义列的 className"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">显示字段
                        <el-tooltip effect="dark" content="作为表格中显示内容的字段。" placement="top">
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                      </div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].showProp" size="mini"
                                  placeholder="显示字段"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">表格排序
                        <el-tooltip effect="dark" content="左侧列信息顺序默认为表单中显示顺序，若想要调整当前列在表格中的显示顺序，需要设定当前值，排序默认降序。"
                                    placement="top">
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                      </div>
                      <div class="value">
                        <el-input-number v-model="option.column[editIndex].sort" size="mini"
                                         placeholder="表格排序"></el-input-number>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">对齐方式</div>
                      <div class="value">
                        <el-radio-group v-model="option.column[editIndex].align" size="small">
                          <el-radio-button label="left">左</el-radio-button>
                          <el-radio-button label="center">居中</el-radio-button>
                          <el-radio-button label="right">右</el-radio-button>
                        </el-radio-group>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">图钉
                        <el-tooltip effect="dark" content="横向内容过多时，列是否固定在左侧或者右侧。" placement="top">
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                      </div>
                      <div class="value">
                        <el-radio-group v-model="option.column[editIndex].fixed" size="small">
                          <el-radio-button label="">无</el-radio-button>
                          <el-radio-button label="left">左</el-radio-button>
                          <el-radio-button label="right">右</el-radio-button>
                        </el-radio-group>
                      </div>
                    </div>

                    <div class="form_span_li" v-if="option.column[editIndex].type === 'switch'">
                      <div class="label">选中文本</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].effectTrueLabel" size="mini"
                                  placeholder="选中时显示文本"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li" v-if="option.column[editIndex].type === 'switch'">
                      <div class="label">未选文本</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].effectFalseLabel" size="mini"
                                  placeholder="未选中时显示文本"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">无数据文本</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].emptyText" size="mini"
                                  placeholder="无数据文本"></el-input>
                      </div>
                    </div>
                  </template>
                </div>
                <div class="form_span">
                  <div class="form_span_title">
                    <div class="form_span_title_c">
                      <el-checkbox v-model="option.column[editIndex].search.show" size="mini"></el-checkbox>
                    </div>
                    <div class="form_span_title_h1">开启检索</div>
                  </div>
                  <template v-if="option.column[editIndex].search.show">
                    <div class="form_span_li">
                      <div class="label">检索标签</div>
                      <div class="value">
                        <el-checkbox v-model="option.column[editIndex].search.hiddenLabel" size="mini">隐藏</el-checkbox>
                        <el-input style="margin-left: 10px" v-if="!option.column[editIndex].search.hiddenLabel"
                                  v-model="option.column[editIndex].search.label" placeholder="检索标签"
                                  size="mini"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">字段key
                        <el-tooltip effect="dark" content="默认为当前列字段。" placement="top">
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                      </div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].search.prop" placeholder="字段key"
                                  size="mini"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li" v-if="option.column[editIndex].type !== 'date'">
                      <div class="label">占位文字</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].search.placeholder" placeholder="占位文字"
                                  size="mini"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">宽度</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].search.width" type="number" placeholder="搜索占用宽度"
                                  size="mini">
                          <template #append>px</template>
                        </el-input>
                      </div>
                    </div>
                    <div class="form_span_li" v-if="option.column[editIndex].type === 'switch'">
                      <div class="label">选中文本</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].effectTrueLabel" size="mini"
                                  placeholder="选中时显示文本"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li" v-if="option.column[editIndex].type === 'switch'">
                      <div class="label">未选文本</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].effectFalseLabel" size="mini"
                                  placeholder="未选中时显示文本"></el-input>
                      </div>
                    </div>
                  </template>
                </div>
                <div class="form_span">
                  <div class="form_span_title">
                    <div class="form_span_title_c">
                      <el-checkbox v-model="option.column[editIndex].formShow" size="mini"></el-checkbox>
                    </div>
                    <div class="form_span_title_h1">开启表单
                      <el-tooltip effect="dark" content="开启后，当前项会在弹出框中进行编辑。" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                  </div>
                  <div class="form_span_li">
                    <div class="label">默认参数
                      <el-tooltip effect="dark" content="开启后，编辑时会默认添加到编辑表单中（适用当前项不在表单中显示仍要作为参数传递的场景）。" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                    <div class="value">
                      <el-checkbox v-model="option.column[editIndex].defaultForm" size="mini"></el-checkbox>
                    </div>
                  </div>
                  <template v-if="option.column[editIndex].formShow">
                    <div class="form_span_li">
                        <div class="label">是否必填</div>
                        <div class="value">
                            <el-switch v-model="option.column[editIndex].form.rules[0].required" size="mini"></el-switch>
                        </div>
                    </div>
                    <div class="form_span_li"
                         v-if="option.column[editIndex].type === 'select' || option.column[editIndex].type === 'image'">
                      <div class="label">开启复选</div>
                      <div class="value">
                        <el-checkbox v-model="option.column[editIndex].form.multiple" size="mini"></el-checkbox>
                      </div>
                    </div>
                    <div class="form_span_li" v-if="option.column[editIndex].type === 'labels'">
                      <div class="label">开启颜色设置</div>
                      <div class="value">
                        <el-checkbox v-model="option.column[editIndex].form.labelColor" size="mini"></el-checkbox>
                      </div>
                    </div>
                    <div class="form_span_li"
                         v-if="option.column[editIndex].form.multiple && option.column[editIndex].type === 'select'">
                      <div class="label">复选值样式</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].form.spanClass" placeholder="复选值样式名称"
                                  size="mini"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li" v-if="option.column[editIndex].type === 'date'">
                      <div class="label">日期类型</div>
                      <div class="value">
                        <el-select v-model="option.column[editIndex].form.dateType" size="small" @change="changeDateType">
                          <el-option label="日期" value="date"></el-option>
                          <el-option label="日期+时间" value="datetime"></el-option>
                          <el-option label="年" value="year"></el-option>
                          <el-option label="月" value="month"></el-option>
                          <el-option label="日期范围" value="daterange"></el-option>
                          <el-option label="日期+时间范围" value="datetimerange"></el-option>
                          <el-option label="月份范围" value="monthrange"></el-option>
                          <el-option label="多个日期" value="dates"></el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="form_span_li" v-if="option.column[editIndex].type === 'date'">
                      <div class="label">日期format
                        <el-tooltip effect="dark" placement="top">
                          <template #content>
                            <el-link type="primary" style="font-size: 12px" href="https://day.js.org/docs/zh-CN/display/format" target="_blank">
                              查看支持的format参数
                            </el-link>
                          </template>
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                      </div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].form.valueFormat" placeholder="日期format"
                                  size="mini"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li" v-if="['image', 'labels'].indexOf(option.column[editIndex].type) < 0">
                      <div class="label">默认值</div>
                      <div class="value">
                        <el-switch v-if="option.column[editIndex].type === 'switch'"
                                   v-model="option.column[editIndex].form.default" size="mini"></el-switch>
                        <el-date-picker class="date-picker" v-else-if="option.column[editIndex].type === 'date'" v-model="option.column[editIndex].form.default"
                                        start-placeholder="开始时间" end-placeholder="结束时间"
                                        :type="option.column[editIndex].form.dateType" :format="option.column[editIndex].form.valueFormat"
                                        :value-format="option.column[editIndex].form.valueFormat" placeholder="选择日期" size="mini">
                        </el-date-picker>
                        <el-input v-model="option.column[editIndex].form.default" v-else placeholder="默认值"
                                  size="mini"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">占位栏数</div>
                      <div class="value">
                        <el-input-number v-model="option.column[editIndex].form.span" :max="24" :min="1"
                                         size="mini"></el-input-number>
                      </div>
                    </div>
                    <div class="form_span_li"
                         v-if="['select', 'text', 'textarea', 'number', 'inputNumber', 'labels'].indexOf(option.column[editIndex].type) >-1
                         || (option.column[editIndex].type === 'date' && !['daterange', 'datetimerange', 'monthrange'].includes(option.column[editIndex].form.dateType))">
                      <div class="label">占位文字</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].form.placeholder" placeholder="占位文字"
                                  size="mini"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li"
                         v-if="option.column[editIndex].type === 'image' && !option.column[editIndex].form.multiple">
                      <div class="label">回显key</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].url" placeholder="回显key"
                                  size="mini"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li" v-if="['text', 'number'].indexOf(option.column[editIndex].type) >-1">
                      <div class="label">前置文本</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].form.prependLabel" placeholder="前置文本"
                                  size="mini"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li" v-if="['text', 'number'].indexOf(option.column[editIndex].type) >-1">
                      <div class="label">后置文本</div>
                      <div class="value">
                        <el-input v-model="option.column[editIndex].form.appendLabel" placeholder="后置文本"
                                  size="mini"></el-input>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">是否显示</div>
                      <div class="value">
                        <!--                        <el-checkbox v-model="option.column[editIndex].form.vIf"></el-checkbox>-->
                        <div class="moreCondition" v-on:click="$refs.conditionDialog.openEvent({option: option})"><i
                            class="el-icon-connection"></i>设置条件
                        </div>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">是否禁用</div>
                      <div class="value">
                        <!--                        <el-checkbox v-model="option.column[editIndex].form.vIf"></el-checkbox>-->
                        <div class="moreCondition"><i class="el-icon-connection"></i>设置条件</div>
                      </div>
                    </div>
                  </template>
                </div>
                <div class="form_span"
                     v-if="['select', 'radio', 'checkbox'].indexOf(option.column[editIndex].type) >-1">
                  <div class="form_span_title">
                    <div class="form_span_title_h1">数据源配置</div>
                  </div>
                  <div class="form_span_li" v-if="option.column[editIndex].type === 'select'">
                    <div class="label">远程搜索</div>
                    <div class="value">
                      <el-checkbox v-model="option.form.filterable" size="mini"
                                   @change="option.form.filterable===true&&option.column[editIndex].type === 'select'?option.column[editIndex].dicType='api':''"></el-checkbox>
                    </div>
                  </div>
                  <div class="form_span_li">
                    <div class="label">数据源</div>
                    <div class="value">
                      <el-select size="mini" placeholder="选择数据源"
                                 v-model="option.column[editIndex].dicType"
                                 clearable
                                 @change="changeDicType(option.column[editIndex])"
                                 :disabled="option.form.filterable===true&&option.column[editIndex].type === 'select'">
                        <el-option label="数据字典" value="dicKey"></el-option>
                        <el-option label="自定义接口" value="api"></el-option>
                        <el-option label="自定义数据" value="custom"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="form_span_li" v-if="option.column[editIndex].dicType === 'custom'">
                    <div class="label">数据集</div>
                    <div class="value dicData">
                      <div class="dicData_li" v-for="(d, di) in option.column[editIndex].dicData" v-bind:key="d.id">
                        <el-input size="mini" style="margin-right: 5px;" placeholder="key" v-model="d.id"></el-input>
                        <el-input size="mini" style="margin-right: 5px;" placeholder="value" v-model="d.label"></el-input>
                        <el-button size="mini" class="deleteBtn" type="danger" circle icon="el-icon-minus"
                                   v-on:click="option.column[editIndex].dicData.splice(di, 1)"></el-button>
                      </div>
                      <div class="dicData_li">
                        <el-button size="mini" type="text"
                                   v-on:click="option.column[editIndex].dicData.push({id: null, label: null})">+ 添加
                        </el-button>
                      </div>
                    </div>
                  </div>
                  <div class="apiPanel" v-if="option.column[editIndex].dicType === 'api'">
                    <div class="form_span_li">
                      <div class="label">接口名称</div>
                      <div class="value">
                        <el-select size="mini" filterable placeholder="选择接口名称"
                                   v-model="option.column[editIndex].form.remoteMethodKey" clearable>
                          <el-option v-for="item in apiList" v-bind:key="item.key" :value="item.key"
                                     :label="item.name"></el-option>
                        </el-select>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">出参key
                        <el-tooltip effect="dark" content="接口返回的数据集中，能作为表格显示数据的字段。" placement="top">
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                      </div>
                      <div class="value">
                        <el-input size="mini" placeholder="数据key"
                                  v-model="option.column[editIndex].form.remoteMethodDataKey" clearable></el-input>
                      </div>
                    </div>
                    <div class="form_span_li">
                      <div class="label">入参数据</div>
                      <div class="value dicData">
                        <div class="dicData_li" v-for="(d, di) in option.column[editIndex].form.remoteMethodParams"
                             v-bind:key="d.name">
                          <el-input size="mini" style="margin-right: 5px;" placeholder="key"
                                    v-model="d.name"></el-input>
                          <el-input size="mini" style="margin-right: 5px;" placeholder="value"
                                    v-model="d.value"></el-input>
                          <el-button size="mini" class="deleteBtn" type="danger" circle icon="el-icon-minus"
                                     v-on:click="option.column[editIndex].form.remoteMethodParams.splice(di, 1)"></el-button>
                        </div>
                        <div class="dicData_li">
                          <el-button size="mini" type="text"
                                     v-on:click="option.column[editIndex].form.remoteMethodParams.push({name: null, value: null})">
                            + 添加
                          </el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form_span_li" v-if="option.column[editIndex].dicType === 'dicKey'">
                    <div class="label">字典key
                      <el-tooltip effect="dark" content="显示字典key的数据" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                    <div class="value">
                      <el-input v-model="option.column[editIndex].dicKey" size="mini" placeholder="请输入字典key"></el-input>
                    </div>
                  </div>
                  <div class="form_span_li">
                    <div class="label">选项值
                      <el-tooltip effect="dark" content="指定选项的值为选项对象的某个属性值" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                    <div class="value">
                      <el-input v-model="option.column[editIndex].dicId"
                                :disabled="['custom', 'dicKey'].indexOf(option.column[editIndex].dicType)>-1"
                                size="mini"
                                placeholder="请输入dicId"></el-input>
                    </div>
                  </div>
                  <div class="form_span_li">
                    <div class="label">选项文本
                      <el-tooltip effect="dark" content="指定选项标签为选项对象的某个属性值" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                    <div class="value">
                      <el-input v-model="option.column[editIndex].dicLabel"
                                :disabled="['custom', 'dicKey'].indexOf(option.column[editIndex].dicType)>-1"
                                size="mini"
                                placeholder="请输入dicLabel"></el-input>
                    </div>
                  </div>
                </div>
              </template>
            </div>
            <div class="dynamicPage_right_panel form" v-else-if="tabKey === 'api'">
              <div class="form_span">
                <div class="form_span_title">
                  <div class="form_span_title_h1">查询数据接口</div>
                </div>
                <div class="form_span_li">
                  <div class="label">接口名称</div>
                  <div class="value">
                    <el-select size="mini" filterable placeholder="选择接口名称" v-model="option.api.search.key" clearable>
                      <el-option v-for="item in apiList" v-bind:key="item.key" :value="item.key"
                                 :label="item.name"></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="form_span_li">
                  <div class="label">出参key
                    <el-tooltip effect="dark" content="接口返回的数据集中，能作为表格显示数据的字段。" placement="top">
                      <i class="el-icon-question"></i>
                    </el-tooltip>
                  </div>
                  <div class="value">
                    <el-input size="mini" placeholder="出参key" v-model="option.api.search.dataKey" clearable></el-input>
                  </div>
                </div>
                <div class="form_span_li">
                  <div class="label">数量key
                    <el-tooltip effect="dark" content="接口返回的数据集中，能作为表格总数的字段。" placement="top">
                      <i class="el-icon-question"></i>
                    </el-tooltip>
                  </div>
                  <div class="value">
                    <el-input size="mini" placeholder="数量key" v-model="option.api.search.totalKey" clearable></el-input>
                  </div>
                </div>
              </div>
              <div class="form_span">
                <div class="form_span_title">
                  <div class="form_span_title_h1">删除数据接口</div>
                </div>
                <div class="form_span_li">
                  <div class="label">接口名称</div>
                  <div class="value">
                    <el-select size="mini" filterable placeholder="选择接口名称" v-model="option.api.delete.key" clearable>
                      <el-option v-for="item in apiList" v-bind:key="item.key" :value="item.key"
                                 :label="item.name"></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="form_span_li">
                  <div class="label">数据key
                    <el-tooltip effect="dark" content="接口会根据当前字段删除数据" placement="top">
                      <i class="el-icon-question"></i>
                    </el-tooltip>
                  </div>
                  <div class="value">
                    <el-input size="mini" placeholder="数据key" v-model="option.api.delete.dataKey" clearable></el-input>
                  </div>
                </div>
              </div>
              <div class="form_span">
                <div class="form_span_title">
                  <div class="form_span_title_h1">更新数据接口</div>
                </div>
                <div class="form_span_li">
                  <div class="label">接口名称</div>
                  <div class="value">
                    <el-select size="mini" filterable placeholder="选择接口名称" v-model="option.api.update.key" clearable>
                      <el-option v-for="item in apiList" v-bind:key="item.key" :value="item.key"
                                 :label="item.name"></el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div class="form_span">
                <div class="form_span_title">
                  <div class="form_span_title_h1">添加数据接口</div>
                </div>
                <div class="form_span_li">
                  <div class="label">接口名称</div>
                  <div class="value">
                    <el-select size="mini" filterable placeholder="选择接口名称" v-model="option.api.add.key" clearable>
                      <el-option v-for="item in apiList" v-bind:key="item.key" :value="item.key"
                                 :label="item.name"></el-option>
                    </el-select>
                  </div>
                </div>
              </div>
              <div class="form_span">
                <div class="form_span_title">
                  <div class="form_span_title_c">
                    <el-checkbox v-model="option.api.detail.open" size="mini"></el-checkbox>
                  </div>
                  <div class="form_span_title_h1">查询数据详情接口</div>
                </div>
                <template v-if="option.api.detail.open">
                  <div class="form_span_li">
                    <div class="label">接口名称</div>
                    <div class="value">
                      <el-select size="mini" filterable placeholder="选择接口名称" v-model="option.api.detail.key" clearable>
                        <el-option v-for="item in apiList" v-bind:key="item.key" :value="item.key"
                                   :label="item.name"></el-option>
                      </el-select>
                    </div>
                  </div>
                  <div class="form_span_li">
                    <div class="label">入参key
                      <el-tooltip effect="dark" content="根据key查询详情。" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                    <div class="value">
                      <el-input size="mini" placeholder="入参key" v-model="option.api.detail.idKey" clearable></el-input>
                    </div>
                  </div>
                  <div class="form_span_li">
                    <div class="label">出参key
                      <el-tooltip effect="dark" content="接口返回的数据集中，能作为显示数据的字段。" placement="top">
                        <i class="el-icon-question"></i>
                      </el-tooltip>
                    </div>
                    <div class="value">
                      <el-input size="mini" placeholder="出参key" v-model="option.api.detail.dataKey"
                                clearable></el-input>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <PreviewDialog ref="previewDialog"></PreviewDialog>
      <SourceCodeDialog ref="sourceCodeDialog"></SourceCodeDialog>
      <ConditionDialog ref="conditionDialog"></ConditionDialog>
    </div>
  </el-dialog>
</template>

<script>
import PreviewDialog from "./PreviewDialog.vue"
import SourceCodeDialog from "./SourceCodeDialog.vue"
import ConditionDialog from "./ConditionDialog.vue"
import draggable from 'vuedraggable'

export default {
  mixins: [],
  components: {
    PreviewDialog,
    SourceCodeDialog,
    ConditionDialog,
    draggable
  },
  emits: ['reload'],
  data() {
    return {
      show: false,
      option: {},
      pageId: null,
      tabKey: null,
      apiList: [],
      editIndex: -1,
      saveLoading: false,
      column: {
        label: null,
        prop: null,
        type: "text",
        tableShow: true,
        formShow: true,
        defaultSearch: false,         // 默认作为检索添加
        defaultForm: false,           // 默认作为编辑添加
        showOverflowTooltip: true,
        fixed: "",
        sort: 0,
        align: "left",
        className: null,
        effectTrueLabel: null,
        effectFalseLabel: null,
        emptyText: '',
        showProp: null,
        dicType: null,
        dicId: "id",
        dicLabel: "label",
        dicData: [],
        url: null,
        form: {
          type: "text",
          default: null,
          span: 12,
          multiple: false,                                              // 开启复选
          spanClass: null,                                              // 开启复选时，显示内容的样式
          defaultIndex: 0,
          filterable: false,                                            // 是否可搜索, 仅对type=select时适用
          remote: false,                                                // 是否为远程搜索, 仅对type=select时适用
          remoteMethod: null,                                           // 远程搜索方法, 仅对type=select时适用
          dateType: 'date',                                             // 日期类型, 仅对type=date时适用
          valueFormat: 'YYYY-MM-DD',                                    // 日期格式, 仅对type=date时适用, 不指定则绑定值为 Date 对象
          appendLabel: null,
          prependLabel: null,
          rules: [
            {
              required: false,
              trigger: "click"
            }
          ],
          remoteMethodKey: null,
          remoteMethodDataKey: null,
          remoteMethodParams: [],
          vIf: function () {
            return true
          }
        },
        search: {
          show: false,
          label: null,
          prop: null,
          hiddenLabel: false,
          placeholder: null,
          width: null
        }
      }
    }
  },
  computed: {},
  mounted() {
  },
  methods: {
    /**
     * 打开对话框
     */
    open(param) {
      this.show = true
      this.pageId = param.id
      this.editIndex = -1
      this.apiList = []
      this.saveLoading = false
      this.tabKey = "api"
      this.option = Object.assign({}, {
        addBtn: true,
        hiddenHandleMenu: false,
        selection: true,
        index: true,
        fit: true,
        'empty-text': "暂无数据",
        columnEmptyText: "",
        column: [],
        border: false,
        stripe: false,
        status: {
          show: false,
          list: [
            {
              id: "wait",
              label: "待审核",
              class: "waitStatus"
            },
            {
              id: "doing",
              label: "审核中",
              class: "doingStatus"
            },
            {
              id: "success",
              label: "审核通过",
              class: "successStatus"
            },
            {
              id: "refuse",
              label: "未通过审核",
              class: "refuseStatus"
            }]
        },
        form: {
          size: "small",
          width: 800,
          closeOnClickModel: false,
          closeOnPressEscape: false,
          labelWidth: 60
        },
        import: {
          show: false,
          tempFilePath: null
        },
        export: {
          show: false,
        },
        handleColumnFixed: "right",
        page: {
          show: true
        },
        api: {
          search: {
            key: null,
            dataKey: "data",
            totalKey: "total"
          },
          delete: {
            key: null,
            dataKey: "ids"
          },
          update: {
            key: null
          },
          add: {
            key: null
          },
          detail: {
            key: null,
            open: false,
            dataKey: "data",
            idKey: "id"
          }
        },
        handleBtnList: [
          {
            key: "edit",
            label: "编辑",
            show: true,
            color: null,
            type: "text"
          },
          {
            key: "delete",
            label: "删除",
            show: true,
            color: null,
            type: "text"
          },
        ]
      }, JSON.parse(JSON.stringify(param.option)))

      // eslint-disable-next-line no-unused-vars
      this.option.column.forEach((t) => {
        t.form = Object.assign({}, this.column.form, t.form)
      })
      this.getSystemMaster()
    },
    /**
     * 关闭对话框
     */
    close() {
      this.show = false
    },

    /**
     * 查询基础数据
     */
    getSystemMaster() {
      let self = this
      self.$api.getSystemMaster({
        paramList: [
          {
            key: "api"
          }
        ]
      }).then(res => {
        self.apiList = res.api
      })
    },
    /**
     * 添加列数据
     */
    addColumn(index = -1) {
      if (index > -1) {
        this.option.column.splice(index + 1, 0, JSON.parse(JSON.stringify(this.column)))
        this.editIndex = index + 1
      } else {
        this.option.column.push(JSON.parse(JSON.stringify(this.column)))
        this.editIndex = this.option.column.length - 1
      }
      this.tabKey = "column"
    },

    /**
     * 切换数据源事件
     * @param row
     */
    changeDicType(row) {
      row.dicData = []
      if (row.dicType === 'dicKey') {
        row.dicId = "key"
        row.dicLabel = "name"
      } else if (row.dicType === 'custom') {
        row.dicId = "id"
        row.dicLabel = "label"
      }
    },

    /**
     * 保存页面html配置
     */
    saveOption() {
      let self = this
      self.saveLoading = true
      self.callApi("createPageOption", {
        id: this.pageId,
        option: this.option
      }).then(() => {
        self.saveLoading = false
        self.close()
        self.$emit("reload")
      }).catch(() => {
        self.saveLoading = false
      })
    },

    /**
     * 列上移
     * @param row
     * @param index
     */
    moveTop(row, index) {
      let preNode = JSON.parse(JSON.stringify(this.option.column[index - 1]))
      this.option.column.splice(index - 1, 1)
      this.option.column.splice(index, 0, preNode)
    },

    /**
     * 列下移
     * @param row
     * @param index
     */
    moveBottom(row, index) {
      let nextNode = JSON.parse(JSON.stringify(this.option.column[index + 1]))
      this.option.column.splice(index + 1, 1)
      this.option.column.splice(index, 0, nextNode)
    },

    /**
     * 切换列类型事件
     * @param row
     */
    changeColumnType(row) {
      if (row.type === 'split') {
        row.tableShow = false
        row.formShow = false
      } else if (row.type === 'date') {
        row.form.default = null
      }
    },

    /**
     * 行选择
     * @param e
     */
    clickRow(e) {
      let rindex = 0
      this.option.column.forEach((row, index) => {
        if (e.prop === row.prop) {
          rindex = index
        }
      })
      this.editIndex = rindex
      this.tabKey = "column"
    },

    /**
     * 日期类型切换事件
     * @param type
     */
    changeDateType(type) {
      let format;
      switch (type) {
        case 'date':
        case 'dates':
        case 'daterange':
          format = 'YYYY-MM-DD';
          break;
        case 'datetime':
        case 'datetimerange':
          format = 'YYYY-MM-DD HH:mm:ss';
          break;
        case 'year':
          format = 'YYYY';
          break;
        case 'month':
        case 'monthrange':
          format = 'YYYY-MM';
          break;
        default:
          format = 'YYYY-MM-DD';
      }
      this.option.column[this.editIndex].form.valueFormat = format;
      this.option.column[this.editIndex].form.default = null;
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  min-height: 40px;
  align-items: center;
  flex-shrink: 0;

  .top_btn {
    flex: 1;
  }

  .top_ok {
  }
}

.dynamicPage {
  width: 100%;
  height: 100%;
  display: flex;
  padding-top: 10px;

  .dynamicPage_left {
    flex: 1;
    padding-right: 20px;

    .dynamicPage_left_top {
    }

    .dynamicPage_left_table {
      padding-top: 10px;

      :deep(input),
      :deep(.el-select) {
        width: 100%;
        border: 0;
        background: transparent !important;
      }

      :deep(.el-table__row .cell) {
        padding: 0;
      }

      :deep(td) {
        padding: 0 !important;
      }

      :deep(.date-picker) {
        width: auto;
        background-color: transparent;
        border: 0;
      }
    }
  }

  .dynamicPage_right {
    width: 300px;
    height: 100%;
    padding-left: 20px;
    border-left: 1px solid var(--border-bd);

    :deep(.el-tabs__item) {
      padding: 0 10px !important;
    }

    .dynamicPage_right_scroll {
      width: 100%;
      height: calc(100% - 70px);
    }

    .dynamicPage_right_panel {
      &.form,
      .form {
        .form_span {
          margin-bottom: 15px;
          background: var(--bg-page);
          padding: 0 10px 10px 10px;
          border-radius: 5px;

          .form_span_title {
            width: 100%;
            display: flex;
            height: 30px;
            align-items: center;
            padding: 5px 0 0px 0;

            .form_span_title_c {
              width: 24px;
            }

            .form_span_title_h1 {
              flex: 1;
              font-size: 14px;
            }

            .form_span_title_arrow {
              color: var(--font-hc);
              font-size: 12px;
            }

            .form_span_title_add {
              color: var(--href);
              font-size: 12px;
              cursor: pointer;
            }
          }

          .apiPanel {
            background: #fff;
            width: calc(100% + 10px);
            padding: 5px;
            border-radius: 5px;
            box-sizing: border-box;
            box-shadow: 1px 2px 4px 1px #eee;
            margin: 5px 0 5px -5px;
          }

          .form_span_li {
            display: flex;
            min-height: 30px;
            align-items: center;
            flex-flow: wrap row;
            padding: 3px 0;

            &:last-child {
              padding-bottom: 0;
            }

            .label {
              width: 80px;
              font-size: 12px;
              color: var(--font-hc);
            }

            .value {
              flex: 1;
              display: flex;
              justify-content: flex-start;
              align-items: center;

              .moreCondition {
                color: var(--primary);
                font-size: 12px;
                flex: 1;
                text-align: right;
                cursor: pointer;

                &:hover {
                  text-decoration: underline;
                }
              }

              :deep(.el-select) {
                width: 100%;
              }

              :deep(input:not(.date-picker .el-input__inner)) {
                border-radius: 3px !important;
                padding: 0 4px !important;
              }

              :deep(.date-picker) {
                width: 100%;
              }

              &.dicData {
                display: block !important;

                .dicData_li {
                  display: flex;
                  width: 100%;
                  margin-bottom: 5px;
                  align-items: center;

                  &.add {
                    margin-bottom: 0;
                  }

                  :deep(.deleteBtn) {
                    padding: 3px;
                    min-height: 18px;
                    height: 20px;
                    font-size: 12px;
                  }
                }
              }
            }

            .checkbox {
              width: 24px;
            }
          }

          .form_span_child {
            width: calc(100% - 24px);
            padding-left: 24px;
            padding-bottom: 10px;
          }
        }
      }

      .columnName {
        position: absolute;
        top: 0;
        background: white;
        z-index: 10;
        width: 100%;
        padding-bottom: 10px;
        font-size: 14px;

        span {
          font-weight: bold;
          font-size: 18px;
          color: var(--font-ha);
        }
      }
    }
  }
}

.handleBtnList {
  .handleBtnList_span {
    display: flex;
    align-items: center;
    border: 1px dashed var(--primary);
    border-radius: 5px;
    margin-bottom: 5px;
    padding: 0 5px 0 10px;

    .handleBtnList_span_checkbox {
      margin-right: 10px;
    }

    .handleBtnList_span_label {
      flex: 1;

      :deep(input) {
        background: transparent;
        border: 0;
        padding-left: 0;
      }
    }

    .handleBtnList_span_btn {
      font-size: 12px;
      width: 20px;
      cursor: pointer;
      text-align: center;

      &.set {
        &:hover {
          color: var(--primary);
        }
      }

      &.delete {
        &:hover {
          color: var(--danger);
        }
      }
    }
  }
}
</style>
